<template>
  <div id="myChart"></div>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  MarkAreaComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  MarkAreaComponent,
  LineChart,
  CanvasRenderer,
]);
import VChart, { THEME_KEY } from "vue-echarts";

export default {
  name: "HelloWorld",
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: "write",
  },
  name: "DynamicLineChart",
  data() {
    return {
      // 实时数据数组
      date: [],
      yieldRate: [],
      yieldIndex: [],
      // 折线图echarts初始化选项
      echartsOption: {
        title: {
          text: "巡检温度检测",
          subtext: "纯属虚构",
        },
        legend: {
          data: ["温度"],
        },
        xAxis: {
          name: "时间",
          nameTextStyle: {
            fontWeight: 600,
            fontSize: 18,
          },
          type: "category",
          boundaryGap: false,
          data: this.date, // 绑定实时数据数组
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} ℃",
          },
          axisPointer: {
            snap: true,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            name: "温度",
            type: "line",
            smooth: true,
            data: this.yieldRate, // 绑定实时数据数组
          },
        ],
      },
    };
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("myChart"), "light"); // 初始化echarts, theme为light
    this.myChart.setOption(this.echartsOption); // echarts设置初始化选项
    setInterval(this.addData, 3000); // 每三秒更新实时数据到折线图
  },
  methods: {
    // 获取当前时间
    getTime: function () {
      var ts = arguments[0] || 0;
      var t, h, i, s;
      t = ts ? new Date(ts * 1000) : new Date();
      h = t.getHours();
      i = t.getMinutes();
      s = t.getSeconds();
      // 定义时间格式
      return (
        (h < 10 ? "0" + h : h) +
        ":" +
        (i < 10 ? "0" + i : i) +
        ":" +
        (s < 10 ? "0" + s : s)
      );
    },
    // 添加实时数据
    addData: function () {
      // 从接口获取数据并添加到数组
      this.$axios.get("/getTem").then((res) => {
        for (var i = 0; i < 20; i++) {
          this.yieldRate.push(res.data[i].Roller_MaxTemp);
        }
        this.date.push(this.getTime(Math.round(new Date().getTime() / 1000)));
        // 重新将数组赋值给echarts选项
        this.echartsOption.xAxis.data = this.date;
        this.echartsOption.series[0].data = this.yieldRate;
        this.myChart.setOption(this.echartsOption);
      });
    },
  },
};
</script>

<style>
#myChart {
  width: 100%;
  height: 500px;
  margin: 0 auto;
}
</style>
